<template>
  <div>
    <div class="title">
      <h1>{{ msg }}</h1>
    </div>
    <product-item :products="cart"></product-item>
    <el-footer >
      <el-row type="flex" class="row-bg" justify="space-between" v-show="isNotEmpty()">
        <el-col :span="2" class="grid-content" style="padding-top: 1%;">合计</el-col>
        <el-col :span="10" class="grid-content" style="padding-top: 1%; align-content:end;">
          {{$store.state.total_price}} 元
        </el-col>
        <el-col :span="3" class="grid-content" style="background: orangered; padding-top: 1%; padding-bottom: 1%;"
              @click="commitBuy">
          <el-button type="text" @click="commitBuy" style="color: white; background: orangered; padding-top: 1%; padding-bottom: 1%; width: 100%; font-size: 25px;">
            结  算
          </el-button>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<style>
.row-bg {
  position: relative;
  margin-top: 2%;
  margin-bottom: 5%;
  background: lightgray;
  font-size: 25px;
}
.product {
  border-bottom: 10px solid black;
}
.product__image {
  width: 100px;
  height: 100px;
}
</style>

<script>
import ProductItem from "@/components/products/ProductItem.vue";

export default {
  name: "home",
  data() {
    return {
      msg: "购 物 车",
    };
  },
  computed: {
    cart() {
      return this.$store.state.cart;
    },
  },
  components: {
    "product-item": ProductItem,
  },
  methods: {
    commitBuy() {
      let loading = this.$loading({
        text: "跳转到付款页面，等待用户付款...",
        lock: true,
        background: 'rgba(0, 0, 0, 0.7)'
      });
      // 这里跳转到付款页面
      
      this.$store.state.cart.forEach(element => {
        this.$store.dispatch('SUBMIT_ORDER', {
          product: element,
          user:    localStorage
        });
        this.$store.commit('REMOVE_FROM_CART', {
          productId: element._id, 
          price:     element.price
        });
      });

      this.$alert("支付成功", "我们收到了你的订单！", {
        confirmButtonText: "好的",
          type: "success",
          callback: action => {
            loading.close();
            // this.$message({
            //   type: 'success',
            //   message: `action: ${ action }`
            // });
          }
        });
    },
    isNotEmpty() {
      return this.$store.state.cart.length > 0;
    }
  }
};
</script>